<template>
    <div class="container-box">
        <div class="one" v-for="(item, index) in Track" :key="index">
            <div class="left">
                <span class="iconfont quan">&#xe566;</span>
                <span class="xian"></span>
            </div>
            <div class="right">
                <span class="time">{{ parseTime(item.time, '{y}-{m}-{d}') }}</span>
                <el-table :data="item.TrackTable" border style="width: 100% " :show-header="false"
                    :header-cell-style="{ background: '#f9f9f9', color: '#606266', height: '80px' }">
                    <el-table-column align="right" prop="title" label="名称" />
                    <el-table-column align="center" prop="content" label="内容" />
                </el-table>
            </div>
        </div>

        <div class="img">
            <img src="./pub.svg" alt="">
            <span class="text">居家监测中</span>
        </div>
    </div>
    <div class="exit" @click="exit">
        <el-button>返回</el-button>
    </div>
</template>
  
<script lang="ts">
import { defineComponent, onBeforeMount, onMounted, reactive, toRefs } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from '@/util/http'
import { parseTime } from '@/util/date'
export default defineComponent({
    name: 'DetailTrack',
    setup() {
        const state = reactive({
            TrackDetail: {
                time: '',
                TrackTable: [
                    {
                        prop: 'place',
                        title: '地点：',
                        content: '',
                    },
                    {
                        prop: 'contactPerson',
                        title: '接触人：',
                        content: '',
                    },
                    {
                        prop: 'activity',
                        title: '活动：',
                        content: '',
                    },
                    {
                        prop: 'vehicle',
                        title: '交通工具：',
                        content: '',
                    },
                    {
                        prop: 'personalProtection',
                        title: '个人防护情况：',
                        content: '',
                    },
                    {
                        prop: 'otherProtection',
                        title: '对方防护情况：',
                        content: '',
                    }
                ]
            },
            Track: [] as any
        })
        // 返回
        const router = useRouter();
        const route = useRoute()
        const exit = () => {
            router.push('/ManagementOfConfidentialPersonnel')
        }

        onBeforeMount(() => {
            // 获取当前id
            let id = route.query.id

            axios({
                method: 'get',
                url: 'cryptographer/finddiseaseSurvey',
                params: {
                    id: id
                }
            })
                .then(res => {
                    res.data.data.forEach(item => {
                        state.TrackDetail.time = item.time
                        state.TrackDetail.TrackTable.forEach(val => {
                            for (let key in item) {
                                if (val.prop == key) {
                                    val.content = item[key]
                                }
                            }
                        })
                        state.Track.push(state.TrackDetail)
                    })
                })

        })

        return {
            ...toRefs(state),
            exit,
            parseTime
        }
    }
})
</script>
  
<style scoped lang="less">
.container-box {
    box-sizing: border-box;
    width: 100%;
    padding: 50px 20px;
    background-color: white;
    position: relative;

    .one {
        width: 100%;
        display: flex;

        .left {
            width: 10%;
            display: flex;
            flex-direction: column;
            align-items: center;

            // 图标
            .iconfont {
                font-size: 25px;
            }

            .quan {
                color: #939393;
                height: 8%;
            }

            .xian {
                border: 1px solid #e5e5e5;
                height: 92%;
            }
        }

        .right {
            width: 45%;
            margin-bottom: 40px;

            // 时间
            .time {
                font-size: 16px;
                font-weight: 700;
                color: #333333;
            }



        }
    }
}

.img {
    border-width: 0px;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 88px;
    height: 109px;
}

.text {
    color: white;
    position: absolute;
    top: 32px;
    right: -8px;
    transform: rotate(53deg);
}

/* 返回按钮 */
.exit {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-button {
    width: 95px;
    height: 40px;
    font-size: 13px;
}
</style>